<template>
  <div class="h100">
    <el-row>
      <nest-tree active-route="Order"></nest-tree>
      <div class="layout-container">
        <router-view v-if="routePath && routePath.meta && routePath.meta.activePath" :key="routePath.meta.activePath"></router-view>
      </div>
    </el-row>
  </div>
</template>

<script>
import { reactive, toRefs, computed, onMounted, nextTick  } from 'vue'
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useRoute } from 'vue-router'
import NestTree from '/@/components/nestTree/index.vue';
export default {
    name: 'OrderIndex',
    components: {
        NestTree
    },
    setup() {
        const storesThemeConfig = useThemeConfig();
		const { themeConfig } = storeToRefs(storesThemeConfig);
        const route = useRoute()
        const state = reactive({
            refreshRouterViewKey: null,
            routePath: {}
        })
		// 设置主界面切换动画
		const setTransitionName = computed(() => {
			return themeConfig.value.animation;
		});
        onMounted(() => {
            nextTick(() => {
                state.routePath = route
            })
        })
        return {
            ...toRefs(state),
            setTransitionName
        }
    }
}
</script>

<style scoped lang="scss">
.h100{
    min-height: 100vh;
}
:deep(.el-menu-item){
    color: var(--el-text-color-primary);
    height: 40px !important;
    line-height: 40px !important;
    margin: 16px 5px 16px;
    padding: 0 !important;
    text-align: center;
    display: flex;
    justify-content: center;
    width: 90px;
    overflow: hidden;
    &::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -1px;
        bottom: -1px;
        right: -1px;
        left: -1px;
        background: var(--el-color-primary);
        transform: rotateZ(-90deg) translate(-100%, -100%);
        transform-origin: top left;
        transition: transform .3s;
        transition-timing-function: linear;
        border-radius: 4px;
    }
    span{
        position: absolute;
        z-index: 2;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    &::after {
        content: "";
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: 1px;
        left: 1px;
        border-radius: 2px;
        background: var(--next-color-white);
        cursor: pointer;
    }
    &:hover{
        span{
            color: var(--el-color-primary);
        }
        &::before{
            transform: rotateZ(0deg) translate(0%, -0%);
        }
    }
}
:deep(.el-menu-item.is-active){
    background-color: var(--el-color-primary-light-9) !important;
    color: var(--el-color-primary);
    margin: 16px 5px 16px;
    border-radius: 4px;
    padding: 0 !important;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    span{
        position: absolute;
        z-index: 2;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    &::after {
        content: "";
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: 1px;
        left: 1px;
        border-radius: 2px;
        background: var(--el-color-primary-light-9);
        cursor: pointer;
    }
    &::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -1px;
        bottom: -1px;
        right: -1px;
        left: -1px;
        background: var(--el-color-primary);
        transform: rotateZ(-90deg) translate(-100%, -100%);
        transform-origin: top left;
        transition: transform .3s;
        transition-timing-function: linear;
        transform: rotateZ(0deg) translate(0%, -0%);
    }
}
.menu-container{
    width: 100px;
    overflow: hidden;
    background: var(--next-color-white);
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    box-shadow: rgba(0, 0, 0, 0.03) 1.95px 1.95px 2.6px;
    .el-menu-list{
        width: 100%;
    }
}
.layout-container{
    flex: 1;
    overflow: auto;
    height: 100vh;
    ::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }
}
</style>